<template>
    <div style="width: 50%; margin-left: 500px;">
        <img :src="(ordersForm.goodsPicture as string)" style="width: 300px;">
        <el-descriptions title="订单信息">
            <el-descriptions-item label="用户">{{ ordersForm.userName }}</el-descriptions-item>
            <el-descriptions-item label="商品">{{ ordersForm.goodsName }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{ ordersForm.orderCount }}</el-descriptions-item>
            <el-descriptions-item label="地址">
                <el-select v-model="ordersForm.address" class="m-2" placeholder="Select">
                    <el-option v-for="item in addressOptions.address" :key="item.id" :label="item.address"
                        :value="item.address" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="总价">￥{{ ordersForm.orderPrize }}</el-descriptions-item>
            <el-descriptions-item label="">
                <el-button type="primary" @click="addOrders()">
                    去支付
                </el-button>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import { ElNotification } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()

const ordersForm = ref({
    userId: route.params.userId,
    userName: route.params.userName,
    goodsId: route.params.goodsId,
    goodsName: route.params.goodsName,
    orderPrize: route.params.orderPrize,
    goodsTypeId: route.params.goodsTypeId,
    goodsType: route.params.goodsType,
    goodsPicture: route.params.goodsPicture,
    orderCount: route.params.orderCount,
    address: '',
    telephone: route.params.telephone,
    ordersId:''
})

const addressOptions = reactive({
    address: [] as any
})

// 异步请求获取下拉框选项
api.address.getAddressListById(ordersForm.value.userId)
    .then(response => {
        addressOptions.address = response.data.data;
    });

const addOrders = async () => {
    api.orders.addOrders(
        {
            id: Number(Date.now().toString().substring(0, 10)),
            userId: ordersForm.value.userId,
            userName: ordersForm.value.userName,
            goodsId: ordersForm.value.goodsId,
            goodsName: ordersForm.value.goodsName,
            orderPrize: ordersForm.value.orderPrize,
            goodsTypeId: ordersForm.value.goodsTypeId,
            goodsType: ordersForm.value.goodsType,
            goodsPicture: ordersForm.value.goodsPicture,
            orderCount: ordersForm.value.orderCount,
            orderAddress: ordersForm.value.address,
            telephone: ordersForm.value.telephone
        }
    )
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            ordersForm.value.ordersId=response.data.msg
            toPay()
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })

            // 在这里可以处理提交失败后的逻辑
        });
}

const toPay = async () => {
    api.orders.alipay({
        out_trade_no: ordersForm.value.ordersId,
        subject: ordersForm.value.goodsName,
        total_amount: Number(ordersForm.value.orderPrize),
    })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            console.log(response);
            const divForm = document.getElementsByTagName('div')
            if (divForm.length) {
                document.body.removeChild(divForm[0])
            }
            const div = document.createElement('div')
            div.innerHTML = response.data.msg // data就是接口返回的form 表单字符串
            document.body.appendChild(div)
            document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
            document.forms[0].submit()

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })

            // 在这里可以处理提交失败后的逻辑
        });
}

const pay = ref({
    page: ''
})
</script>

<style scoped></style>